$(function () {
    echarts_7();
    function echarts_7() {
        // 基于准备好的dom，初始化echarts实例
        let myChart7 = echarts.init(document.getElementById('echarts_7'));
        function status(num){
            if(num < 10){
                return {value: '良好',color:'green'}
            }else if(num > 10 && num < 50){
                return {value: '一般',color:'#fff'}
            }else if(num > 50 && num < 80){
                return {value: '紧急',color:'#f5d354'};
            }else if(num > 80){
                return {value: '瘫痪',color:'#f84a4a'};
            }else
                return {value: '未知',color:'#fff'};;
        }
        let option7 = {
            backgroundColor: '#001b1b1b',
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    mark : {show: false},
                    restore : {show: false},
                    saveAsImage : {show: false}
                }
            },
            // grid: {
            //     top: '10%',
            //     left: '18%',
            //     bottom: '3%',
            //     right:'5%',
            //     containLabel: true
            // },
            series: [
                {
                    name: '当前报警率',
                    type: 'gauge',
                    radius : '100%',
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                            width: 0.1,
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {            // 坐标轴小标记
                        textStyle: {       // 属性lineStyle控制线条样式
                            // fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length :15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    splitLine: {           // 分隔线
                        length :15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width:3,
                            color: '#fff',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {           // 分隔线
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title : {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 10,
                            fontStyle: 'italic',
                            color: '{color}',
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 10

                        }
                    },
                    detail : {
                        backgroundColor: 'rgba(30,144,255,0.8)',
                        borderWidth: 0.1,
                        borderColor: '#fff',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 5,
                        offsetCenter: [0, '30%'],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            color: '#fff',
                            fontSize: '8px'
                        },
                        formatter:'{value}%'
                    },
                    // detail: {formatter:'{value}%'},
                    data: [{value: 50, name: '故障率',color: '#fff'}]
                }
            ]
        };
        var st;
        setInterval(function () {
            if(option7.series[0].data[0].name === '故障率'){
                st = (Math.random() * 30).toFixed(2) - 0;
            }else{
                st = (st + (1 - Math.random()*2)*2).toFixed(2) - 0;
            }
             
            var _s = status(st);
            option7.series[0].data[0].value = st;
            option7.series[0].data[0].name = _s.value;
            option7.series[0].data[0].color = _s.color;
            myChart7.setOption(option7, true);
        },1000);

        // 使用刚指定的配置项和数据显示图表。
        myChart7.setOption(option7);
        window.addEventListener("resize",function(){
            myChart7.resize();
        });
    }
});